<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>
        .cc{
            width: 700px;
            height: 500px;
            background: palevioletred;
            box-shadow:blueviolet 0 0 0 2px;
            margin: auto;
        }
        .aa{
      text-align: center;
        }
    </style>
</head>

<body>
    <div id="app" class="cc">
   <h1 class="aa">个人信息表</h1>
   <form>
姓名<input type="text" v-model='user'>
姓名 {{user}}<br/>

<fieldset style="margin-right: 30px; width:450px;">
    <legend>健康信息</legend>
    身高:<input type="text" v-model='h'>{{h}}
    体重：<input type="text" v-model='w'>{{w}}
    </fieldset>
    <input type="radio" value="男" v-model='sex'>
    <label>男</label>
    <input type="radio" value="女" v-model='sex'> {{sex}}
    <label>女</label>
    喜爱的运动:<br/><br>
    <input type="checkbox" value="篮球" v-modle='checkedNames'>
    <label>篮球</label>
    <input type="checkbox" value="足球" v-modle='checkedNames'>
    <label>足球</label>
    <input type="checkbox" value="羽毛球" v-modle='checkedNames'>
    <label>羽毛球</label>
    <input type="checkbox" value="跑步" v-modle='checkedNames'>
    <label>跑步</label>
    {{checkedNames}}
    <select name="city"  v-model="address">
        <option value="">请选择城市</option>
        <option value="阆中">阆中</option>
        <option value="巴中">巴中</option>
        <option value="广元">官员</option>
    </select><br/><br/>{{address}}<br/><br/>
    个人简介：<br/><br/>
    <textarea v-model='profile' cols="50" rows='6'>
        填写信息
    </textarea>
    <div style="text-align: center;">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    </div>
    {{profile}}
</form>
<div>
  
</div>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               user:'',
               h:'',
               w:'',
               sex:'',
               checkedNames:[],
               address:'',
               profile:''
           },
           methods:{
               
           }
        });
    </script>
</body>

</html>